iT邦幫忙

DAY 28
3

30天掌握Sass語法系列 第 24

30天掌握Sass語法 - (28)Compass圖片合併功能(CSS Sprite)

  • 分享至 

  • xImage
  •  

在早期網頁設計師要做CSS Sprite的時候,
除了自己手做土法煉鋼以外,
同時也會使用線上網站工具來解決這個問題,

剛好翻到六年前我自己在photoshop合併過的一張圖片...=_=||

說實在在早期做這種東西在那個時候真的很費時,
而且還必須做到px分毫不差,
否則就會看到其他spite的圖片。
雖然網路上也不少線上圖片合併服務,
但有時候要微調的時候還是很不方便。
所以這裡就來介紹我自己在用Compass CSS Sprite的常用功能。
Yes
首先你必須先到你的圖片資料夾(images),
開設一個資料夾放你要合併的圖片(images/icon),
再把圖片放進去,請注意合併的圖片必須都是png,
Compass並不支援jpg與gif哦。

設定完成後,Sass檔案就打:

       //資料夾名稱/底下所有的png
@import "icon/*.png"
@include all-icon-sprites

儲存候你就會發現images資料會出現合併過後的圖片了。

如果你不希望每張圖片那麼密,
以避免在使用時會不小心顯示出其他圖片樣式,
那就可以用$sprite資料夾-spacing:20px來修正,
程式碼就變成:

//資料夾名稱-spacing:20px
$icon-spacing: 20px
@import "icon/*.png"
@include all-icon-sprites

圖片就會上下有間距20px:

如果你希望合併的圖片是水平呈現,
那程式碼就打成:

//資料夾名稱
$icon-layout: horizontal 
@import "icon/*.png"
@include all-icon-sprites

圖片就會變成水平合併:

再來合併出來的CSS碼就會顯示成這個樣子,
class就會依序生成→ .[資料夾名稱]-[原圖片名稱]:

.icon-sprite, .icon-download, .icon-fb, .icon-mail, .icon-plurk {
  background: url('/images/icon-se60cf2ca5f.png') no-repeat;
}
.icon-download {
  background-position: 0 -68px;
}
.icon-fb {
  background-position: 0 -120px;
}
.icon-mail {
  background-position: 0 0;
}
.icon-plurk {
  background-position: 0 -188px;
}

這樣一來,
在管理上就方便多了,
當你有其他圖片要引入時,
就把他丟到對應資料夾,
Compass就會自動幫你對應class名稱與位置。

影片內容除了預設流程外,
同時也錄製了一些實際載入在div與i的tag上的background用法,
提供各位參考與學習^_^:
Yes

圖檔來源:https://www.iconfinder.com


上一篇
30天掌握Sass語法 - (27) 使用@if提升@Mixin靈活度,以CSS圖形化為例
下一篇
30天掌握Sass語法 - (29) @for+random()創造無限可能
系列文
30天掌握Sass語法41
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
westwood0512
iT邦新手 5 級 ‧ 2014-02-28 20:18:00

sfisonly 你好!
我這邊有遇到一些問題想要請問你一下:
Compass sprites所自動生成的CSS

<pre class="c" name="code">.oicon-sprite, .oicon-blogger, {  
  background: url('/images/oicon-s2166d0533c.png') no-repeat;  
}  

background的url的路徑是'/images/oicon-s2166d0533c.png'但是照樣我這邊的網頁打開抓不到圖片,要用F12強行在網頁上改成'../images/oicon-s2166d0533c.png'圖片就顯示了,請問有甚麼辦法改變自然生成的圖片路徑,改成我想要的路徑呢?或者是我沒注意到細節所以做失敗了呢?

chiouchu iT邦新手 5 級 ‧ 2014-03-27 12:09:00 檢舉

您好~
剛好最近也在研究這個,找到一個解決方式
可以在config.rg
加上一行relative_assets = true
原本其實有這行,被註解了~打開也可以
重新watch之後,就會變相對路徑喔~

0
gill163
iT邦新手 5 級 ‧ 2014-11-03 10:38:53

您好,

在images的folder有出現水平的icon,但在加入@includ all-icon-sprites;時卻出現以下的錯誤訊息,可以幫我看一下那邊有錯嗎? 謝謝。

我打的code:
$icon-layout: horizontal;
$icon-spacing: 20px;
@import "icon/*.png";
@include all-icon-sprites;

出現的錯誤:
NoMethodError: undefined method `parent' for nil:NilClass

廖洧杰 iT邦高手 2 級 ‧ 2014-11-18 13:15:49 檢舉

hi,請問你是用哪種環境來編譯的?

0
林位青
iT邦新手 5 級 ‧ 2021-03-13 17:50:07

那就可以用 $sprite資料夾-spacing: 20px 來修正,
程式碼就變成:

//資料夾名稱-spacing: 20px
$icon-spacing: 20px
@import "icon/*.png"
@include all-icon-sprites

我要留言

立即登入留言